<template>
	<view class="ys">
		<y-header></y-header>
		<view class="userbody">
			<view class="pc">
				<y-bread :name="pageName"></y-bread>
			</view>
			<view class="usermain">
				<view class="left">
					<y-usermenu></y-usermenu>
				</view>
				<view class="right">
					<view class="orderlist-title">
						<text>{{pageName}}</text>
					</view>
					<view class="passwordbox">
						<view class="passinput-li">
							<view class="pass-title">
								{{$t('index.ymm')}}
							</view>
							<view class="pass-input">
								<uni-easyinput prefixIcon="locked" type="password" v-model="password"
									:placeholder="$t('index.qsrmm')">
								</uni-easyinput>
							</view>
						</view>
						<view class="passinput-li">
							<view class="pass-title">
								{{$t('index.xmm')}}
							</view>
							<view class="pass-input">
								<uni-easyinput prefixIcon="locked" type="password" v-model="newpassword"
									:placeholder="$t('index.qsrmm')">
								</uni-easyinput>
							</view>
						</view>
						<view class="passinput-li">
							<view class="pass-title">
								{{$t('index.cfxmm')}}
							</view>
							<view class="pass-input">
								<uni-easyinput prefixIcon="locked" type="password" v-model="new_password_re"
									:placeholder="$t('index.qsrmm')">
								</uni-easyinput>
							</view>
						</view>
						<view class="pass-btn">
							<button @click="surePassword">{{$t('index.qr')}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		changePwd
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pageName: this.$t('index.xgdlmm'),
				password: '',
				newpassword: '',
				new_password_re: ''
			}
		},
		onLoad() {

		},
		methods: {
			surePassword() {
				if (this.password == '') {
					uni.$showMsg(this.$t('index.qsrxmm'))
					return
				}
				if (this.newpassword != this.new_password_re) {
					uni.$showMsg(this.$t('index.qqblcmm'))
					return
				}
				changePwd({
					old_password: this.password,
					new_password: this.newpassword,
					new_password_re: this.new_password_re,
				}).then(res => {
					uni.$showMsg(res.msg)
					this.password = this.new_password_re = this.newpassword = ''
				})
			}
		}
	}
</script>

<style lang="scss">
	.userbody {
		max-width: 1180px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	.usermain {
		display: flex;
		justify-content: space-between;

		.left {
			box-sizing: border-box;
			width: 25%;
			max-width: 265px;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.right {
			box-sizing: border-box;
			width: 75%;
			padding-right: 1%;
			margin-top: 20px;
			margin-bottom: 20px;

			.orderlist {
				margin-top: 15px;
			}

			.orderlist-title {
				font-size: 22px;
				border-left: 3px solid #4a4e5c;
				padding-left: 7px;
			}

			.passwordbox {
				line-height: 2;
				border: 1px solid #dddddd;
				padding: 40px 15%;
				margin-top: 20px;

				.passinput-li {
					.pass-title {
						text-align: left;
						font-size: 14px;
						color: #333333;
						margin-bottom: 10px;
					}

					.pass-input {
						margin-bottom: 10px;
						height: 40px;
						line-height: 40px;
					}
				}

				.pass-btn {
					margin-top: 40px;
					margin-bottom: 20px;

					button {
						border-radius: 4.5px;
						font-size: 14px;
						text-align: center;
						box-sizing: border-box;
						display: inline-block;
						background-color: #ff5353;
						color: #ffffff;
						cursor: pointer;
						border: 1px solid #ff5353;
						width: 100%;
						height: 40px;
						line-height: 40px;
					}
				}
			}
		}
	}

	@media (max-width:768px) {
		.usermain {
			.left {
				display: none;
			}

			.right {
				width: 100%;
				padding: 0;

				.passwordbox {
					padding: 40px 5%;
				}
			}
		}

		.pc {
			display: none;
		}
	}
</style>